<template>
  <div>
    <div class="order">
      <nav-top @callback="callback"
               Licon="more"
               Ricon="filter"
               Rtxt="筛选"></nav-top>
      <div class="order_main">
        <div class="order_head">
          <h2>收入概览</h2>
          <div class="flex">
            <div class="left">
              <div class="tt">
                <span class="tit">今日</span>
                <span>{{today_count}}单</span>
              </div>
              <div class="static">
                ￥
                <span class="static_num">{{today_real_pay}}</span>
              </div>
            </div>
            <div class="right">
              <div class="tt">
                <span class="tit">累计</span>
                <span>{{all_count}}单</span>
              </div>
              <div class="static">
                ￥
                <span class="static_num">{{all_real_pay}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="order_body">
          <div ref="main_tit"
               class="main_title">
            <span :class="move?'move':''"
                  class="txt"
                  ref="txt">共{{total}}单/共{{real_pay}}元</span>
            <span @click="toSearch"
                  ref="input"
                  class="input">
              <input disabled
                     type="text" />
              <img src="../../../assets/images/icon/icon_sousuo.png"
                   alt />
            </span>
          </div>
          <i class="i"></i>
          <div class="main_list">
            <ul v-infinite-scroll="loadMore"
                infinite-scroll-disabled="loading"
                infinite-scroll-distance="5">
              <li @click="todetail(item)"
                  v-for="item in list"
                  :key="item"
                  class="flex">
                <div class="top">
                  <span class="label">{{item.label}}</span>
                  <span class="status">{{item.status=='1'?'未结算':item.status=='2'?"已支付":item.status=='3'?'已退款':''}}</span>
                  <span class="recording">
                    <span v-if="item.status!='3'">+{{item.recording}}</span>
                    <span v-else>-{{item.recording}}</span>
                  </span>
                </div>
                <div class="bottom">
                  <span class="date">{{item.date}}</span>
                  <span class="phone">{{item.phone}}</span>
                </div>
              </li>
            </ul>
            <div class="tips"
                 v-if="list.length==0">暂无订单</div>
          </div>
        </div>
        <div v-if="more">
          <div class="bot_tip"
               v-if="wait">上拉加载更多</div>
          <div v-else
               class="bot_tip">拼命加载中 . . .</div>
        </div>
        <div v-else>
          <div class="bot_tip">已加载全部</div>
        </div>
      </div>
    </div>
    <rightScope :rightList="rightList"
                :RightScope="RightScope"
                @cencel='cencel'
                @submit="submit"
                @clear="clear"
                @btnClick="btnClick"></rightScope>
  </div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
import store from '@/store'

export default {
  name: 'Order',
  computed: {
    ...mapGetters(['proxy_id', 'proxy_type'])
  },
  data() {
    return {
      today_count: 0,
      today_real_pay: 0,
      all_count: 0,
      all_real_pay: 0,
      loading: true,
      list: [
        // {
        //   label: "中小学状元3年卡",
        //   status: "已支付",
        //   recording: "+360.00",
        //   date: "11月15日 12:35:28",
        //   phone: "13541257841"
        // }
      ],
      curr: 1,
      limits: 10,
    //   id: '', //代理商id
      total: 0, //
      real_pay: 0,
      more: true, //控制底部文字提示
      wait: false, //控制列表请求
      move: false, //控制文字滑动
      RightScope: false, //控制右侧边框
      rightList: [
        {
          title: '支付状态',
          id: '',
          list: [
            { label: '全部', id: '' },
            { label: '已支付', id: '2' },
            { label: '未结算', id: '1' },
            { label: '已退款', id: '3' },
            { label: '未购买用户订单', id: '4' }
          ],
          show: true,
          dis: false
        },
        {
          title: '日期选择',
          id: '',
          list: [
            { label: '全部', id: '' },
            { label: '昨天', id: 1 },
            { label: '近一周', id: 6 },
            { label: '近30天', id: 30 },
            { label: '上个月', id: 'before' },
            { label: '近三月', id: '2' },
            { label: '近半年', id: '5' },
            { label: '近一年', id: '11' }
          ],
          show: true,
          dis: false
        },
        {
          title: '区域负责人',
          id: '',
          list: [],
          show: store.getters.proxy_type * 1 === 1 ? true : false,
          dis: false
        }
      ],
      sure: false,
      startTime: '',
      endTime: '',
      tempArr: [],
      loadMored: true,
      order_proxy_type: 1
    }
  },
  created() {
    // this.id = this.proxy_id;
    this.getOrderList(
      this.curr,
      this.limits,
      this.rightList[2].id,
      this.rightList[0].id,
      this.startTime,
      this.endTime,
      this.order_proxy_type
    )
    this.proxy_type == 1 && this.getProxyList()
  },
  watch: {
    total(val) {
      if (!this.RightScope) {
        this.$nextTick(() => {
          if (
            this.$refs.main_tit.offsetWidth / 2 <=
            this.$refs.txt.offsetWidth
          ) {
            this.move = true
          } else {
            this.move = false
          }
        })
      }
    },
    RightScope(val) {
      // console.log(val);
      if (!val) {
        if (!this.sure) {
          this.rightList.map(e => {
            e.id = ''
            this.startTime = ''
            this.endTime = ''
          })
        }
      }
    }
  },
  methods: {
    ...mapMutations(['setLeftScope']),
    todetail(item) {
      // console.log(item);
      this.$router.push({
        name: 'detail',
        query: { id: item.id }
      })
    },
    clear() {
      // console.log("clear");
      this.rightList.map(e => {
        e.id = ''
      })
      this.startTime = ''
      this.endTime = ''
    },
    toSearch() {
      this.$router.push({
        name: 'search'
      })
    },
    btnClick(item, ite) {
      item.id = ite.id
      //   if (item.title == '区域负责人') this.id = ite.id
      // console.log(item, ite);
      if (item.title == '日期选择') {
        if (item.id == '') return (this.startTime = ''), (this.endTime = '')
        this.endTime = Math.floor(new Date().getTime() / 1000)
        if (typeof item.id == 'number') {
          this.startTime =
            Date.parse(
              new Date(
                new Date().setDate(new Date().getDate() - item.id)
              ).toLocaleDateString()
            ) / 1000
          if (item.id == '1') {
            this.endTime =
              Date.parse(
                new Date(
                  new Date().setDate(new Date().getDate() - item.id)
                ).toLocaleDateString() +
                  ' ' +
                  '23:59:59'
              ) / 1000
          }
        } else if (item.id === 'before') {
          var temp = new Date(
            new Date().setMonth(new Date().getMonth() - 1)
          ).toLocaleDateString()
          var arr = temp.split('/')
          var days = new Date(arr[0], arr[1], 0).getDate()
          var year = new Date(temp).getFullYear()
          var month = new Date(temp).getMonth()
          var date = '01'
          this.startTime = new Date(year, month, date).getTime() / 1000
          this.endTime =
            Date.parse(
              new Date(
                new Date(year, month, days).getTime()
              ).toLocaleDateString() +
                ' ' +
                '23:59:59'
            ) / 1000
        } else {
          // var day = new Date().setDate(01)
          this.startTime =
            Date.parse(
              new Date(
                new Date(new Date().setDate('01')).setMonth(
                  new Date().getMonth() - item.id
                )
              ).toLocaleDateString()
            ) / 1000
        }
        // console.log(this.startTime, this.endTime);
      }
    },
    getProxyList() {
      this.Http.getProxyList({
        proxy_id: this.proxy_id,
        proxy_type: this.proxy_type,
        all: 1
      }).then(res => {
        // console.log(res);
        this.rightList[2].list = res.map(e => ({ label: e.name, id: e.id }))
        this.rightList[2].list.unshift({ label: '全部', id: '' })
        if (this.rightList[2].list.length == 0) {
          this.rightList[2].list = { label: '暂无队员' }
        }
      })
    },
    submit() {
      this.curr = 1
      this.tempArr = []
      this.list = []
      this.loading = true
      this.total = ''
      this.getOrderList(
        this.curr,
        this.limits,
        this.rightList[2].id,
        this.rightList[0].id,
        this.startTime,
        this.endTime,
        this.order_proxy_type
      )
      this.sure = true
      this.RightScope = false
    },
    cencel() {
      this.RightScope = false
      this.sure = false
      // console.log("cencel");
    },
    loadMore() {
      if (this.loadMored) {
        this.wait = false
        this.curr += 1
        this.getOrderList(
          this.curr,
          this.limits,
          this.rightList[2].id,
          this.rightList[0].id,
          this.startTime,
          this.endTime,
          this.order_proxy_type
        )
        // console.log("加载中...");
      }
    },
    callback(icon) {
      if (icon == 'more') {
        this.setLeftScope(true)
      }
      if (icon == 'filter') {
        this.RightScope = true
      }
    },
    getOrderList(
      curr,
      limits,
      proxy_id,
      status,
      start_time,
      end_time,
      order_proxy_type
    ) {
      if (proxy_id == '') {
        proxy_id = this.proxy_id
        order_proxy_type = 2
      } else {
        order_proxy_type = 1
      }
      this.Http.orderList({
        curr,
        limits,
        proxy_id,
        status,
        start_time,
        end_time,
        order_proxy_type
      })
        .then(r => {
          // console.log(r);
          this.today_count = r.today_count
          this.today_real_pay = r.today_real_pay.toFixed(2)
          this.all_count = r.all_count
          this.all_real_pay = r.all_real_pay.toFixed(2)
          this.loading = true
          this.real_pay = r.real_pay.toFixed(2)
          this.total = r.total
          r.list.map((item, index) => {
            let time = item.create_time.split(' ')[1]
            let date =
              new Date(item.create_time).getMonth() +
              1 +
              '月' +
              new Date(item.create_time).getDate() +
              '日'
            this.tempArr.push({
              label: item.pname,
              status: item.status,
              recording: item.real_pay.toFixed(2),
              date: date + ' ' + time,
              phone: item.phone,
              id: item.id
            })
          })
          // console.log(this.tempArr);
          this.loading = false
          this.wait = true
          this.list = this.tempArr
          // console.log(this.list);
          if (this.list.length == r.total) {
            this.more = false
            this.loadMored = false
          } else {
            this.more = true
            this.loadMored = true
          }
        })
        .catch(e => console.log(e))
    }
  }
}
</script>
<style lang="less" scoped>
.order {
  background: rgba(247, 248, 250, 1);
  height: 100vh;

  .order_main {
    padding: 0 36px;
    // width: 100vw;
    .order_head {
      h2 {
        // width: 117px;
        // height: 28px;
        font-size: 30px;
        font-weight: 500;
        color: rgba(34, 34, 34, 1);
        line-height: 48px;
        margin-bottom: 24px;
      }
      .flex {
        display: flex;
        justify-content: space-around;
        .left {
          width: 248px;
          height: 100px;
          border: 1px solid #ccc;
          margin-right: 19px;
          border-radius: 20px;
          background: url('../../../assets/images/icon/img_jinrin.png')
            no-repeat -40px;
          background-size: 360px 160px;
          display: flex;
          flex-direction: column;
          padding: 30px 36px;
          color: rgba(255, 255, 255, 1);
          // box-shadow: 0px 1px 10px 0px rgba(20, 200, 255, 1);
          filter: drop-shadow(1px 1px 5px rgba(20, 200, 255, 1));

          .tt {
            display: flex;
            justify-content: space-between;
            height: 27px;
            font-size: 28px;
            font-weight: 500;
            line-height: 48px;
            margin-bottom: 33px;
            .tit {
              height: 30px;
              font-size: 32px;
              font-weight: 500;
              line-height: 48px;
            }
          }
          .static {
            font-weight: bold;
          }
          .static_num {
            height: 38px;
            font-size: 38px;
            font-weight: bold;
            color: rgba(255, 255, 255, 1);
            line-height: 48px;
          }
        }
        .right {
          width: 248px;
          height: 100px;
          margin-left: 19px;
          border-radius: 20px;
          border: 1px solid #ccc;
          background: url('../../../assets/images/icon/img_leiji.png') no-repeat -40px;
          background-size: 360px 160px;
          padding: 30px 36px;
          color: rgba(255, 255, 255, 1);
          // box-shadow: 1px 1px 10px 20px rgba(255, 157, 24, 1);
          filter: drop-shadow(1px 1px 5px rgba(255, 157, 24, 1));

          .tt {
            display: flex;
            justify-content: space-between;
            height: 27px;
            font-size: 28px;
            font-weight: 500;
            line-height: 48px;
            margin-bottom: 33px;
            .tit {
              height: 30px;
              font-size: 32px;
              font-weight: 500;
              line-height: 48px;
            }
          }
          .static {
            font-weight: bold;
          }
          .static_num {
            height: 38px;
            font-size: 38px;
            font-weight: bold;
            color: rgba(255, 255, 255, 1);
            line-height: 48px;
          }
        }
      }
    }
    .order_body {
      position: relative;
      background: #fff;
      border-radius: 20px;
      margin-top: 40px;
      // height: 745px;
      // overflow: scroll;
      .main_title {
        position: relative;
        padding: 26px 28px;
        height: 84px;
        overflow: hidden;
        // display: flex;
        .txt {
          white-space: nowrap;
          height: 84px;
          font-size: 32px;
          width: 282px;
          font-weight: 500;
          color: rgba(102, 102, 102, 1);
          line-height: 84px;
          position: relative;
          left: 0;
          &.move {
            animation: 4s moved linear infinite normal;
          }
        }
        @keyframes moved {
          0% {
            left: 0;
          }
          25% {
            left: -10%;
          }
          50% {
            left: -20%;
          }
          75% {
            left: -10%;
          }
          100% {
            left: -0%;
          }
        }
        .input {
          position: absolute;
          right: 28px;
          width: 282px;
          height: 84px;
          margin-left: 20px;
          display: inline-block;
          input {
            width: 100%;
            height: 84px;
            text-indent: 22px;
            border-radius: 42px;
            background: linear-gradient(
              90deg,
              rgba(240, 242, 245, 1) 0%,
              rgba(240, 242, 245, 1) 100%
            );
          }
          img {
            position: absolute;
            width: 33px;
            height: 33px;
            top: 50%;
            right: 28px;
            transform: translateY(-50%);
            padding: 10px;
          }
        }
      }
      .i {
        width: 100%;
        height: 1px;
        display: block;
        background: rgba(232, 232, 232, 1);
      }
      .main_list {
        overflow: scroll;
        height: 745px;

        .flex {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          border-bottom: 1px solid rgba(232, 232, 232, 1);
          .top,
          .bottom {
            display: flex;
            justify-content: space-between;
            // padding: 0 28px;
          }
          .top {
            padding: 34px 28px 26px;
            .label {
              // height: 34px;
              flex: 3;
              font-size: 36px;
              font-weight: bold;
              color: rgba(34, 34, 34, 1);
              line-height: 48px;
            }
            .status {
              // height: 23px;
              flex: 1;
              font-size: 24px;
              font-weight: 500;
              color: rgba(153, 153, 153, 1);
              line-height: 48px;
            }
            .recording {
              flex: 1.2;
              // height: 27px;
              font-size: 36px;
              font-weight: bold;
              color: rgba(34, 34, 34, 1);
              line-height: 48px;
            }
          }
          .bottom {
            padding: 0 28px 33px;
            .date {
              // height: 22px;
              font-size: 24px;
              font-weight: 500;
              color: rgba(153, 153, 153, 1);
              line-height: 48px;
            }
            .phone {
              // height: 18px;
              font-size: 24px;
              font-weight: 500;
              color: rgba(153, 153, 153, 1);
              line-height: 48px;
            }
          }
        }
        .tips {
          font-size: 32px;
          text-align: center;
          padding: 40px;
        }
      }
    }
    .bot_tip {
      padding: 15px 0;
      text-align: center;
      // height: 25px;
      font-size: 26px;
      font-weight: 400;
      color: rgba(103, 106, 107, 1);
      line-height: 36px;
    }
  }
}
</style>